<template>
	<div id="Original"> 
		<div class="originalContent" v-for="(item,index) in orignals" :key="index">
			<div class="img">
				<img :src="item.cover" style="width: 100%;" height="100%"/>
			</div>
			<div class="text" style="display: flex; justify-content: center; flex-direction: column;">
				<p class="title">{{item.title}}</p>
				<p class="synopsis">{{item.synopsis}}</p>
			</div>
			<div class="bottom" style="text-align: 30px;">
				<img src="../../../../public/作者.png"  style="position: absolute;left: 30px ; "/>
				<span style="position: absolute;left: 48px ;">{{item.createName}}</span>
				<img src="../../../../public/点赞.png" width="20px" height="20px" style="position: absolute;right: 10px;" />
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				orignals:[]
			}
		},
		mounted(){
			this.$http.get(this.$apis.Original).then((resp)=>{
				this.orignals = resp.data.data;
				console.log(this.orignals)
			})
		}
	}
</script>

<style lang="scss" scoped>
	#Original{
		width: 100%;
		height: 100%;
		background: white;
		.originalContent{
			width: 100%;
			height: 300px;
			.img{
				width: 100%;
				height: 70%;
			}
			.text{
				
				width: 80%;
				height: 20%;
				text-align: center;
				margin: 5px auto;
				.synopsis{
					width: 100%;
					height: 50px;
					font-size: 14px;
					color: gray;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					text-align: center;
				}
			}
			.bottom{
				width: 100%;
				height: 100%;
				color: gray;
				position: relative;
			}
		}
	}
</style>
